import { observer } from 'mobx-react-lite';
import { Text, View } from '@tarojs/components';
import ImageComp from '@/components/Image';
import TagComp from '@/components/Tag';
import { CommonUtil } from '@/utils/CommonUtil';
import './index.less';
import '@/pages/tabbar/landlord/home/index.less';

interface IProps {
  key?: number;
  houseName: string;
  isShowLandlord?: boolean;
  landlordImg?: string;
  landlordName?: string;
  toLookHouse?: Function;
  houseImg: string;
  housePrice: number;
  date: Date;
  dateText: string;
  address: string;
  isFooterSlot?: boolean;
  FooterSlotComponent?: JSX.Element;
  isStatusSlot?: boolean;
  StatusSlotComponent?: JSX.Element;
  statusText?: string;
  statusBg?: string;
}

function TenantHouseCard(props: IProps) {
  const {
    key,
    houseName,
    isShowLandlord = true,
    landlordImg,
    landlordName,
    toLookHouse,
    houseImg,
    housePrice,
    date,
    dateText,
    address,
    isFooterSlot,
    FooterSlotComponent,
    statusText = '',
    statusBg = 'var(--mini-first)',
    isStatusSlot,
    StatusSlotComponent,
  } = props;

  /**
   * 点击房屋详情内容
   */
  const clickHouseContent = () => {
    toLookHouse && toLookHouse();
  };

  return (
    <View className='house-card-container' key={ key }>
      <View className='house-name'>{ houseName }</View>
      {
        isShowLandlord ? <View className='home-landlord-info'>
          <View className='flex items-center'>
            <ImageComp
              src={ landlordImg }
              className='landlord-head-img'
            />
            <Text className='landlord-text'>{ landlordName }</Text>
          </View>
        </View> : null
      }
      <View className='house-content' onClick={ clickHouseContent }>
        <View className='img-wrap'>
          <ImageComp src={ houseImg }/>
        </View>
        <View className='info-wrap'>
          <View className='info-item'>
            <Text className='label'>状态：</Text>
            {
              isStatusSlot ? StatusSlotComponent : <TagComp content={ statusText } bgColor={ statusBg }/>
            }
          </View>
          <View className='info-item'>
            <Text className='label'>租金：</Text>
            <Text className='price font-bold'>￥{ housePrice }</Text>
          </View>
          <View className='info-item'>
            <Text className='label'>{ dateText }</Text>
            <Text>{ CommonUtil.formatUtcTime(date) }</Text>
          </View>
          <View className='info-item'>
            <Text className='label'>地址：</Text>
            <Text className='info-address'>{ address }</Text>
          </View>
        </View>
      </View>
      { isFooterSlot ? FooterSlotComponent : null }
    </View>
  );
}

export default observer(TenantHouseCard);